<template>
  <div>
    <div id="container" style="width: 100%; height: 80vh"></div>
  </div>
</template>

<script>
// 信息窗体的内容
var content = [
  "<div>禽舍一</div>"
];
var content1 = [
  "<div>禽舍二</div>"
];
export default {
  name: "Map",
  data(){
    return {}
  },
  created() {
  },
  mounted() {
  //   // 创建地图实例
  //   var map = new AMap.Map("container", {
  //     zoom: 13,
  //     center: [35.075012,113.949043],
  //     // resizeEnable: true,
  //     // mapStyle: 'amap://styles/whitesmoke'
  //   });
  //
    // 创建一个 Marker 实例：
    var marker1 = new AMap.Marker({
      position: new AMap.LngLat(114.026521,35.066902),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      title: '禽舍二'
    })

  // 创建地图实例
  var map = new AMap.Map("container", {
    zoom: 13,
    center: [114.049524,35.089941],
    resizeEnable: true
  });
// 创建 infoWindow 实例
    var infoWindow = new AMap.InfoWindow({
      anchor: 'top-right',
      content: content.join("<br>")  //传入 dom 对象，或者 html 字符串
    });
    var infoWindow1 = new AMap.InfoWindow({
      anchor: 'top-right',
      content: content1.join("<br>")  //传入 dom 对象，或者 html 字符串
    });
    // 创建一个Marker实例
    var marker = new AMap.Marker({
      position: new AMap.LngLat(114.049524,35.089941),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      title: '新乡市原阳县',
    });

    var clickHandler = function(e) {
      alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
      // 打开信息窗体
      infoWindow.open(map,[114.049524,35.089941]);
    };




    var clickHandler1 = function(e) {
      alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
      // 打开信息窗体
      infoWindow1.open(map,[114.026521,35.066902]);
    };

    // 绑定事件
    marker.on('click', clickHandler);

    marker1.on('click', clickHandler1);

    // 将创建的点标记添加到已有的地图实例：
    map.add(marker);
    map.add(marker1);

    map.plugin('AMap.DragRoute', function () {
      // path 是驾车导航的起、途径和终点，最多支持16个途经点
      var path = []

      path.push([114.119537,35.091745])
      path.push([113.92144,35.041445])
      path.push([113.951309,35.076293])

      var route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE)
      // 查询导航路径并开启拖拽导航
      route.search()
    })
    //
    // var polyLine= new AMap.Polyline(
    //     {
    //       path:path,
    //       strokeWeight: 5,
    //       broadcastWidth: 5,
    //       strokeStyle: "dashed",
    //       strokeColor: "#428100",
    //       lineJoin:"round"
    //     }
    // )
    // map.add(polyLine)

  },
  methods:{}
}
</script>

<style scoped>

</style>